<template>
	<view class="water-container">
		<view class="left">
			<image @click="handleImg(item)" v-for="(item,index) in leftList" :key="index" :src="item" alt=""
				mode="widthFix"></image>
		</view>
		<view class="right">
			<image @click="handleImg(item)" v-for="(item,index) in rightList" :key="index" :src="item" alt=""
				mode="widthFix"></image>
		</view>
	</view>
</template>


<script>
	export default {
		name: "waterFallByJs",
		data() {
			return {
				// 初始化左右盒子
				leftList: [],
				rightList: [],
			};
		},
		props: {
			list: {
				type: Array,
				default: () => []
			}
		},
		created() {
			this.setDataList(this.list, null, 0)
		},
		methods: {
			async setDataList(arr = [], imgKey, minHeight = 10) {
				uni.showLoading({
					title: '加载中'
				})
				let height1 = 0, //第一组图片累计高度
					height2 = 0, //第二组图片累计高度
					that = this
				that.leftList = []
				that.rightList = []
				for (let i = 0; i < arr.length; i++) {
					try {
						//等图片全部加载完成后再计算高度,否则因图片加载时间不一致出现每次重新加载图片 顺序错乱问题
						let heightData = await uni.getImageInfo({
							src: imgKey ? arr[i][imgKey] : arr[i]
						});
						let ImgHeight = heightData.length == 1 ? minHeight : heightData[1].height
						//如果长度等于1，就是图片有问题，这时候设置一个默认高度，如果长度等于2，下标1就有图片高度
						if (height1 <= height2) {
							height1 += ImgHeight
							that.leftList.push(arr[i])
						} else {
							height2 += ImgHeight
							that.rightList.push(arr[i])
						}

					} catch (err) {
						console.error('getImageInfo-err', err)
					}
				}
				uni.hideLoading()
			},
			handleImg(item) {
				uni.previewImage({
					urls: this.list,
					current: item
				})
			},
			handleImgLeft(item) {
				uni.previewImage({
					urls: this.leftList,
					current: item
				})
			},
			handleImgRight(item) {
				uni.previewImage({
					urls: this.rightList,
					current: item
				})
			}
		}

	}
</script>
<style lang="scss">
	.water-container {
		padding: 0 30rpx;
		font-size: 14rpx;
		line-height: 24rpx;

		.right,
		.left {
			display: inline-block;
			width: 49%;
			vertical-align: top;
		}

		.left {
			margin-right: 2%;
		}

		.left image,
		.right image {
			width: 100%;
			margin-bottom: 10rpx;
		}
	}
</style>